<!-- 考勤-基础设置-其他设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>考勤周期</h2>
              </header>
            </template>
            <a-space direction="vertical" :size="30">
              <div>系统将按考勤周期核算月度考勤结果（历史月份不受影响）</div>
              <div>
                从每月{{ form.attendanceCycle }}日开始

                <a-button type="text" @click="modify">修改</a-button>
              </div>
            </a-space>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>排班限制</h2>
              </header>
            </template>
            <a-space direction="vertical" :size="30">
              <div>
                除了历史考勤周期不允许排班外，额外限制子管理员不可在线排哪些日期的班（避免子管理员修改到历史日期的班次，从而影响核算结果），同时建议您取消子管理员导入排班的权限
              </div>
              <div>
                <a-radio-group
                  direction="vertical"
                  v-model="form.schedulingRestriction"
                >
                  <a-radio value="1">仅限制历史考勤月不可排班</a-radio>
                  <a-radio value="2">额外限制每日零点之前日期不可排班</a-radio>
                  <a-radio value="3"
                    >额外限制昨日零点之前日期不可排班（适合有跨也不班次的客户）</a-radio
                  >
                </a-radio-group>
              </div>
            </a-space>
          </a-collapse-item>
        </a-collapse>
      </main>
      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
          >返回</a-button
        >
        <a-button class="btn" type="primary" @click="save">保存</a-button>
      </footer>
    </div>
  </ContentCard>
  <AddModal v-model:visible="modalVisible" @modifyDate="modifyDate" />
</template>

<script lang="ts" setup>
import AddModal from './AddModal.vue';
import {
  GetOtherSetting,
  PutOtherSetting
} from '@/apis/attendance/base-setting/index';
import { TOtherSetting } from '@/apis/attendance/base-setting/type';
import { Message } from '@arco-design/web-vue';
const title = '其他设置';

const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '其他设置'];
const form = reactive<TOtherSetting>({});
let modalVisible = ref(false);

let attendanceDate = ref(1);

const modify = () => {
  modalVisible.value = true;
};

const modifyDate = (formData: number) => {
  form.attendanceCycle = String(formData);
};
const init = async () => {
  const res = await GetOtherSetting();
  Object.assign(form, res);
  console.log(res);
};
const save = async () => {
  await PutOtherSetting({ list: form });
  Message.info('修改成功');
};
init();
</script>

<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header h2 {
      display: flex;
      align-items: center;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
    section {
      padding: 0 20px;
    }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
